<template>
	<view>
		<!-- 邀请回答  -->
		<u-popup v-model="value" :popup="false" mode="center" :mask-close-able="false" border-radius="5" :zoom="false" z-index="500">
			<view class="sendMsg" :style="[{height:current==0?'970rpx':current==1?'650rpx':current==2?'800rpx':'650rpx'}]">
				<view class="header u-flex u-row-between u-p-l-30 u-p-r-30 u-p-t-20 u-p-b-20">
					<view class="">邀请回答</view>
					<u-icon name="close" @click="close"></u-icon>
				</view>
				<view class="u-p-30">
					<view class="alert-info u-p-20 u-m-b-20" :style="[{ backgroundColor: theme.lightColor, color: theme.bgColor }]">
						快快邀请好友来解答问题吧！每天可以发送10次邀请！
					</view>
					<view class="" v-if="value && !isBack">
						<!-- #ifdef MP-BAIDU -->
						<fa-u-tabs :list="list" :active-color="theme.bgColor" :is-scroll="false" :current="current" @change="change" font-size="25"></fa-u-tabs>
						<!-- #endif -->
						<!-- #ifndef MP-BAIDU -->
						<u-tabs :list="list" :active-color="theme.bgColor" :is-scroll="false" :current="current" @change="change" font-size="25"></u-tabs>
						<!-- #endif -->
					</view>
					<view class="u-p-t-15 " v-if="isBack">
						<view class="fa-line u-p-b-15" :style="[{borderBottom:'5rpx solid '+theme.bgColor,color:theme.bgColor}]">站内会员</view>
					</view>
					<view class="u-p-t-20" v-if="!current">
						<u-input v-model="keyword" type="text" :border="true" />
						<u-gap height="20" bg-color="#fff"></u-gap>
						<scroll-view scroll-y="true" class="scroll-Y" style="height: 500rpx;">
							<view class="site">
								<view class="u-flex u-row-between u-p-t-20 u-p-b-20 u-border-bottom">
									<view class="avatar">头像</view>
									<view class="nickname">昵称</view>
									<view class="operate">操作</view>
								</view>
								<view class="u-flex u-row-between u-p-t-10 u-p-b-10 u-border-bottom" v-for="(item, index) in userList" :key="index">
									<view class="avatar u-flex u-row-center"><u-avatar size="80" :src="item.avatar"></u-avatar></view>
									<view class="nickname">{{ item.nickname }}</view>
									<view class="operate">
										<view class="u-flex">
											<u-button
												hover-class="none"
												type="primary"
												size="mini"
												:custom-style="{ backgroundColor: theme.bgColor, color: theme.color }"
												@click="pay(false, item)"
											>
												邀请TA
											</u-button>
											<u-button hover-class="none" type="error" class="u-m-l-10" size="mini" @click="pay(true, item)">付费邀请</u-button>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="u-p-t-50" v-if="current == 1">
						<view class="u-p-30"><u-input v-model="qq" type="text" :border="true" placeholder="请输入QQ" /></view>
						<view class="u-text-center u-p-t-30">
							<u-button
								hover-class="none"
								type="primary"
								:custom-style="{ width: '90%', height: '60rpx', backgroundColor: theme.bgColor, color: theme.color }"
								size="mini"
								@click="goInvitePost"
							>
								发送邀请
							</u-button>
						</view>
					</view>
					<view class="u-p-t-10 u-text-center" v-if="current == 2">
						<image style="width: 370rpx;height: 370rpx;" :src="url" mode=""></image>
						<view class="">让好友扫描二维码帮忙回答</view>
					</view>
					<view class="u-p-t-50" v-if="current == 3">
						<view class="u-p-30"><u-input v-model="email" type="text" :border="true" placeholder="请输入邮箱" /></view>
						<view class="u-text-center u-p-t-30">
							<u-button
								hover-class="none"
								type="primary"
								:custom-style="{ width: '90%', height: '60rpx', backgroundColor: theme.bgColor, color: theme.color }"
								size="mini"
								@click="goInvitePost"
							>
								发送邀请
							</u-button>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-modal v-model="mshow" title="付费邀请" :confirm-text="!isBack?'发送邀请':'确定'" :show-cancel-button="true" border-radius="10" @confirm="goInvitePost">
			<view class="slot-content">
				<view class="u-p-30">
					<rich-text :nodes="nodes"></rich-text>
					<view class="u-m-t-20 u-font-24">
						请输入邀请赏金
						<text class="u-p-l-10 u-tips-color">金额必须在￥{{ vuex_config.inviteprice }}区间</text>
					</view>
					<view class="u-m-t-20"><u-input v-model="price" type="number" :border="true" placeholder="请输入邀请赏金" /></view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
export default {
	name: 'fa-invite-answer',
	props: {
		value:{
			type:Boolean,
			default:false
		},
		isBack:{
			type:Boolean,
			default:false
		},
		source_id: {
			type: [Number, String],
			default: 0
		},
		fullurl: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			mshow: false,
			list: [
				{
					name: '站内会员'
				},
				{
					name: 'QQ邀请'
				},
				{
					name: '微信邀请'
				},
				{
					name: '邮箱邀请'
				}
			],
			invite_type: ['site', 'qq', '', 'email'],
			current: 0,
			qq: '',
			email: '',
			price: '',
			userList: [],
			keyword: '',
			url: '',
			user:{},
			nodes: `<div style="background-color: #f2dede;border-color: #ebccd1;color: #e74c3c;border: 1px solid transparent;border-radius: 3px;padding: 15px;font-size:13px;">温馨提示：<br>1、被邀请者回答提问后将直接得到<b>邀请赏金</b>，与是否采纳无关<br>2、如果被邀请者在采纳最佳答案前仍未回答，赏金将退还给邀请者<br></div>`
		};
	},
	watch: {
		keyword(newValue, oldValue) {
			this.goInviteSearch();
		},
		fullurl: {
			handler: function(newValue, oldValue) {
				this.url = this.$u.http.config.baseUrl + '/addons/ask/qrcode/build.html?text=' + newValue;
			},
			immediate: true
		}
	},
	mounted() {
		if(this.vuex_token){
			this.goInviteSearch();
		}
	},
	methods: {
		close() {
			this.$emit('input',false);
		},
		change(index) {
			this.current = index;
		},
		goInviteSearch: async function() {
			let res = await this.$api.goInviteSearch({
				q: this.keyword
			});
			if (!res.code) {
				this.$u.toast(res.msg);
				return;
			}
			this.userList = res.data || [];
		},
		goInvitePost: async function() {
			let inviteMoney = this.vuex_config.inviteprice.split('-');
			if (parseInt(this.price) < parseInt(inviteMoney[0]) || parseInt(this.price) > parseInt(inviteMoney[1])) {
				this.mshow = true;
				this.$u.toast(`赏金必须在${this.vuex_config.inviteprice}区间`);
				return;
			}
			if(this.isBack){
				this.$emit('invite',{
					user:this.user,
					price:this.price?this.price:0
				});
				this.price = '';
				return;
			}
			let res = await this.$api.goInvitePost({
				id: this.source_id,
				type: this.invite_type[this.current],
				user: this.user.id,
				price: this.price,
				qq: this.qq,
				email: this.email
			});
			this.$u.toast(res.msg);
		},
		pay(ispay, item) {
			this.user = item;
			if (ispay) {
				this.mshow = true;
			}else{
				this.goInvitePost();
			}

		}
	}
};
</script>

<style lang="scss" scoped>
.sendMsg {
	width: 600rpx;
	.header {
		border-bottom: 1px solid #eee;
		background-color: #f8f8f8;
	}
	.fa-line{
		display: inline-block;
	}
}
.site {
	text-align: center;
	.avatar {
		width: 20%;
	}
	.nickname {
		overflow: hidden;
		width: 30%;
	}
	.operate {
		width: 50%;
	}
}
</style>
